<template>
  <div class="learning-plan">
    <div class="header">
      <router-link to="/main/renshi/zhaoping/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>学习方案</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待制定" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="formalDate" label="转正日期" width="180"></el-table-column>
            <el-table-column prop="level" label="职级" width="100"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="createPlan(scope.row)">制定方案</el-button>
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已制定" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column prop="position" label="职位" width="150"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="planDate" label="制定日期" width="180"></el-table-column>
            <el-table-column prop="planStatus" label="执行状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="getPlanStatusType(scope.row.planStatus)">
                  {{ scope.row.planStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="success" @click="updateProgress(scope.row)">更新进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 制定方案对话框 -->
    <el-dialog title="制定学习方案" :visible.sync="planDialogVisible" width="60%">
      <el-form :model="planForm" label-width="120px" v-if="currentEmployee">
        <el-form-item label="基本信息">
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
            <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
            <el-descriptions-item label="职级">{{ currentEmployee.level }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>

        <el-form-item label="方案周期">
          <el-date-picker
            v-model="planForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="学习目标">
          <el-input type="textarea" v-model="planForm.goals" rows="4"
            placeholder="设定整体学习目标"></el-input>
        </el-form-item>

        <el-form-item label="学习内容">
          <div class="learning-items">
            <div v-for="(item, index) in planForm.items" :key="index" class="learning-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="item.content" placeholder="学习内容"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="item.type" placeholder="类型">
                    <el-option label="技术培训" value="技术培训"></el-option>
                    <el-option label="业务学习" value="业务学习"></el-option>
                    <el-option label="软技能" value="软技能"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-date-picker v-model="item.deadline" type="date" placeholder="完成期限">
                  </el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-button type="danger" icon="el-icon-delete" circle
                    @click="removeItem(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain icon="el-icon-plus" 
              @click="addItem">添加学习项目</el-button>
          </div>
        </el-form-item>

        <el-form-item label="考核方式">
          <el-input type="textarea" v-model="planForm.evaluation" rows="4"
            placeholder="描述学习效果的考核方式"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="planDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPlan">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 更新进度对话框 -->
    <el-dialog title="更新学习进度" :visible.sync="progressDialogVisible" width="50%">
      <div class="progress-form" v-if="currentEmployee && currentEmployee.plan">
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in currentEmployee.plan.items"
            :key="index"
            :type="getProgressType(item.progress)"
            :timestamp="item.deadline">
            <el-card class="progress-card">
              <h4>{{ item.content }}</h4>
              <p class="item-info">类型：{{ item.type }}</p>
              <el-progress
                :percentage="item.progress"
                :status="getProgressStatus(item.progress)">
              </el-progress>
              <el-input-number
                v-model="item.progress"
                :min="0"
                :max="100"
                size="small">
              </el-input-number>
              <el-input
                type="textarea"
                v-model="item.feedback"
                placeholder="学习反馈"
                :rows="2">
              </el-input>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div slot="footer">
        <el-button @click="progressDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitProgress">保存进度</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="学习方案详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="plan-detail" v-if="currentEmployee && currentEmployee.plan">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="姓名">{{ currentEmployee.name }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ currentEmployee.position }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ currentEmployee.department }}</el-descriptions-item>
          <el-descriptions-item label="职级">{{ currentEmployee.level }}</el-descriptions-item>
          <el-descriptions-item label="方案周期">
            {{ formatDateRange(currentEmployee.plan.dateRange) }}
          </el-descriptions-item>
          <el-descriptions-item label="执行状态">{{ currentEmployee.planStatus }}</el-descriptions-item>
        </el-descriptions>

        <div class="plan-content">
          <h4>学习目标</h4>
          <p>{{ currentEmployee.plan.goals }}</p>

          <h4>学习内容</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in currentEmployee.plan.items"
              :key="index"
              :type="getProgressType(item.progress)"
              :timestamp="item.deadline">
              <el-card class="progress-card">
                <h4>{{ item.content }}</h4>
                <p class="item-info">类型：{{ item.type }}</p>
                <el-progress
                  :percentage="item.progress"
                  :status="getProgressStatus(item.progress)">
                </el-progress>
                <p class="feedback" v-if="item.feedback">反馈：{{ item.feedback }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>

          <h4>考核方式</h4>
          <p>{{ currentEmployee.plan.evaluation }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          id: 1,
          name: '张三',
          position: '前端开发工程师',
          department: '技术部',
          formalDate: '2024-03-15',
          level: 'P2'
        }
      ],
      completedList: [
        {
          id: 2,
          name: '李四',
          position: '后端开发工程师',
          department: '技术部',
          planDate: '2024-03-16',
          planStatus: '进行中',
          plan: {
            dateRange: ['2024-03-16', '2024-06-16'],
            goals: '掌握核心技术栈，提升系统设计能力',
            items: [
              {
                content: '学习微服务架构',
                type: '技术培训',
                deadline: '2024-04-15',
                progress: 60,
                feedback: '已完成基础理论学习，正在进行实践'
              },
              {
                content: '系统设计文档编写',
                type: '业务学习',
                deadline: '2024-05-15',
                progress: 30,
                feedback: '正在学习相关规范'
              }
            ],
            evaluation: '1. 完成技术文档\n2. 项目实践\n3. 技术分享'
          }
        }
      ],
      planDialogVisible: false,
      progressDialogVisible: false,
      detailDialogVisible: false,
      currentEmployee: null,
      planForm: {
        dateRange: [],
        goals: '',
        items: [],
        evaluation: ''
      }
    }
  },
  methods: {
    getPlanStatusType(status) {
      const map = {
        '未开始': 'info',
        '进行中': 'warning',
        '已完成': 'success'
      }
      return map[status] || 'info'
    },
    getProgressType(progress) {
      if (progress >= 100) return 'success'
      if (progress > 0) return 'warning'
      return 'info'
    },
    getProgressStatus(progress) {
      if (progress >= 100) return 'success'
      if (progress > 0) return ''
      return 'exception'
    },
    createPlan(row) {
      this.currentEmployee = row
      this.planForm = {
        dateRange: [],
        goals: '',
        items: [{ content: '', type: '', deadline: '' }],
        evaluation: ''
      }
      this.planDialogVisible = true
    },
    addItem() {
      this.planForm.items.push({
        content: '',
        type: '',
        deadline: '',
        progress: 0
      })
    },
    removeItem(index) {
      this.planForm.items.splice(index, 1)
    },
    viewDetail(row) {
      this.currentEmployee = row
      this.detailDialogVisible = true
    },
    updateProgress(row) {
      this.currentEmployee = row
      this.progressDialogVisible = true
    },
    submitPlan() {
      if (!this.planForm.dateRange.length || !this.planForm.goals) {
        this.$message.error('请填写完整信息')
        return
      }

      // TODO: 提交方案到后端
      this.currentEmployee.planDate = this.formatDate(new Date())
      this.currentEmployee.planStatus = '进行中'
      this.currentEmployee.plan = {
        ...this.planForm,
        items: this.planForm.items.map(item => ({
          ...item,
          progress: 0
        }))
      }

      // 从待制定列表移动到已制定列表
      const index = this.pendingList.findIndex(item => item.id === this.currentEmployee.id)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentEmployee)
      }

      this.$message.success('方案制定成功')
      this.planDialogVisible = false
    },
    submitProgress() {
      // TODO: 提交进度到后端
      let totalProgress = 0
      this.currentEmployee.plan.items.forEach(item => {
        totalProgress += item.progress
      })
      const avgProgress = totalProgress / this.currentEmployee.plan.items.length

      if (avgProgress >= 100) {
        this.currentEmployee.planStatus = '已完成'
      } else if (avgProgress > 0) {
        this.currentEmployee.planStatus = '进行中'
      }

      this.$message.success('进度更新成功')
      this.progressDialogVisible = false
    },
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    },
    formatDateRange(range) {
      if (!range || !range.length) return ''
      return `${this.formatDate(range[0])} 至 ${this.formatDate(range[1])}`
    }
  }
}
</script>

<style lang="scss" scoped>
.learning-plan {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .learning-items {
    .learning-item {
      margin-bottom: 15px;
    }
  }

  .progress-card {
    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    .item-info {
      margin: 5px 0;
      color: #909399;
      font-size: 13px;
    }

    .el-progress {
      margin: 10px 0;
    }

    .el-input-number {
      margin: 10px 0;
    }

    .feedback {
      margin: 10px 0 0;
      color: #606266;
      font-size: 13px;
    }
  }

  .plan-content {
    margin-top: 20px;

    h4 {
      margin: 15px 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
      white-space: pre-line;
    }
  }
}
</style> 